<template>
  <view>dddff</view>
  <view>
    <button size="mini" @click="getWindowInfo">getWindowInfo</button>
    <button size="mini" @click="printSize">printsize</button>
  </view>
  <view class="vw-100 bg-red height-50" id="vw-100">
    100vw
  </view>
  <view class="per-100 bg-blue height-50">
    100%
  </view>
  <view style="width: 750rpx;" class="bg-red rpx-750">
    750rpx
  </view>
</template>

<script lang="ts" setup>
  
  const getWindowInfo = () => {
    let ret = uni.getWindowInfo()
    console.log("🚀 ~ getWindowInfo ~ ret:", ret)
    
  }

  const printSize = () => {

    
    console.log("🚀 ~ printSize ~ printSize:")
    
    uni.createSelectorQuery().select('#vw-100').boundingClientRect(res => {
      console.log("🚀 vw-100:", res)
    }).exec()

    uni.createSelectorQuery().select('.per-100').boundingClientRect(res => {
      console.log("🚀 100%:", res)
    }).exec()

    uni.createSelectorQuery().select('.rpx-750').boundingClientRect(res => {
      console.log("🚀 750rpx:", res)
    }).exec()
  }
  

</script>

<style lang="less" scoped>
  
  
  .vw-100 {
    width: 100vw;
  }
  
  .per-100 {
    width: 100%;
  }
</style>